<template>
  <div>
    <!-- 表单 -->
    <el-form :model="form" :rules="rules" ref="formRef" inline>
      <!-- 维度选择框 -->
      <el-form-item label="维度">
        <el-select v-model="form.selectedDimension" placeholder="请选择维度">
          <el-option label="N1" value="N1"></el-option>
          <el-option label="N2" value="N2"></el-option>
          <!-- 其他选项... -->
        </el-select>
      </el-form-item>

      <!-- 日期选择框 -->
      <el-form-item label="日期" prop="selectedDate">
        <el-date-picker
            v-model="form.selectedDate"
            type="date"
            placeholder="请选择日期"
        ></el-date-picker>
      </el-form-item>

      <!-- 查询按钮 -->
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px;">
      <el-table-column
          v-for="(column, index) in columns"
          :key="index"
          :prop="column.prop"
          :label="column.label"
          align="center"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        selectedDimension: 'N1', // 当前选择的维度
        selectedDate: '' // 用户选择的日期
      },
      rules: {
        selectedDate: [
          { required: true, message: '请选择日期', trigger: 'change' } // 必填校验
        ]
      },
      columns: [
        { label: '机构名称', prop: 'name' },
        { label: '', prop: 'overdueCount' }, // 动态生成的列
        { label: '', prop: 'collectionCount' }, // 动态生成的列
        { label: '', prop: 'uncollectedCount' }, // 动态生成的列
        { label: '', prop: 'completionRate' }, // 动态生成的列
        { label: '催收完成率排名', prop: 'completionRank' }
      ],
      tableData: [
        { name: '中山路支行', overdueCount: 10, collectionCount: 20, uncollectedCount: 5, completionRate: 80, completionRank: 1 },
        { name: '东塘支行', overdueCount: 15, collectionCount: 25, uncollectedCount: 7, completionRate: 75, completionRank: 2 },
        // 更多数据...
      ]
    };
  },
  methods: {
    handleQuery() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 校验通过，执行查询逻辑

          // 将日期格式化为字符串（可选）
          const formattedDate = this.$moment(this.form.selectedDate).format('YYYY-MM-DD');

          // 根据选择的维度动态生成表头
          this.columns = [
            { label: '机构名称', prop: 'name' },
            { label: this.form.selectedDimension + '逾期笔数', prop: 'overdueCount' },
            { label: this.form.selectedDimension + '催收笔数', prop: 'collectionCount' },
            { label: this.form.selectedDimension + '未催收笔数', prop: 'uncollectedCount' },
            { label: this.form.selectedDimension + '催收完成率', prop: 'completionRate' },
            { label: '催收完成率排名', prop: 'completionRank' }
          ];

          // 模拟查询操作（可以根据实际需求加载数据）
          console.log('查询条件:', this.form.selectedDimension, formattedDate);
        } else {
          // 校验失败，提示用户
          console.log('校验失败，请检查输入');
          return false;
        }
      });
    }
  }
};
</script>